<!--
[watch]

- 作用: 监视数据的变化 (和 Vue2 中的 watch 作用一致)
- 特点: Vue3 中的 watch 只能监视以下四种数据:
  1. ref 定义的数据
  2. reactive 定义的数据
  3. 函数返回一个值
  4. 一个包含上述内容的数组

情况二
监视 ref 定义的 [对象类型] 数据: 直接写数据名, 监视的是对象的[地址值], 
若想监视对象内部的数据, 要手动开启深度监视.

注意:
- 若修改的是 ref 定义的对象中的属性, newValue 和 oldValue 都是新值, 因为它们是同一个对象.
- 若修改整个 ref 定义的对象, newValue 是新值, oldValue 是旧值, 因为不是同一个对象了.
-->
<template>
  <div class="person">
    <h1>情况二: 监视 【ref】 定义的 【对象类型】 数据</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref, watch } from 'vue';

  // 数据
  let person = ref({
    name: '张三',
    age: 18,
  })

  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson() {
    person.value = {name: '李四', age: 90}
  }

  /*
    监视
    情况二: 监视【ref】定义的【对象类型】数据, 监视的是对象的地址值, 若想监视对象内部属性的变化, 需要手动开启深度监视.
    watch 的第一个参数是: 被监视的数据
    watch 的第二个参数是: 被监视的回调
    watch 的第三个参数是: 配置对象(deep: 深度监视, immediate 立刻执行监视(监视由空置到初始值的变化, 等等...))
   */
  watch(person, (newValue, oldValue)=> {
    console.log('person变化了', newValue, oldValue)
  }, { deep: true, immediate: true, once: false})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>